import { Component } from 'react'
import { AtList, AtListItem, AtButton, AtIcon, AtSteps } from "taro-ui"
import { View, Text, Picker } from '@tarojs/components'
import { inject, observer } from 'mobx-react'
import { getEducationList, getEducationValueByIndex } from '../../../utils/education'
import { getAgeRange, getAgeIndexs, getAgeText, getAgeValueByIndex } from '../../../utils/age'
import { getHeightIndexs, getHeightRange, getHeightText, getHeightValueByIndex } from '../../../utils/height'
import { getMaritalStatusByIndex, getMaritalStatusByValue, getMaritalStatusList } from '../../../utils/maritalStatus'
import { getMinIncomeList, getMinIncomeValueByIndex, minIncomeToText } from '../../../utils/minIncome'
import { getHouseStatusList, getHouseStatusByIndex, getHouseStatusByValue } from '../../../utils/houseStatus'
import { getCarStatusList, getCarStatusByIndex, getCarStatusByValue } from '../../../utils/carStatus'
import Taro from '@tarojs/taro'
import './index.less'

const EDUCATION_RANGE = getEducationList({ hasEmpty: false });
const AGE_RANGE = getAgeRange({ hasEmpty: false, multiple: true })
const HEIGHT_RANGE = getHeightRange({ hasEmpty: false, multiple: true })
const MARITAL_STATUS_RANGE = getMaritalStatusList({ hasEmpty: false })
const MIN_INCOME_RANGE = getMinIncomeList({ hasEmpty: false })
const HOUSE_RANGE = getHouseStatusList();
const CAR_RANGE = getCarStatusList();
@inject('store')
@observer
export default class Index extends Component {
  // constructor () {
  //   super(...arguments)
  //   this.state = {
  //     value: ''
  //   }
  // }
	state = {
    value: '',
    education: "", //学历
    minAge: "",
    maxAge: "",
    minHeight: "",
    maxHeight: "",
    maritalStatus: "",
    minIncome: "",
    house: "",
    car: ""
  }

  componentWillMount () { }

  componentDidMount () {
    this.getAccountRequirement();
  }

  getAccountRequirement = async () => {
    const { id } = this.props;
		const { success, data, msg } = await Taro.request({
			method: 'get',
			url: '/api/account/requirement/detail',
			data: {
        accountId: id
      }
		})
    if (success && data) {
      const {
        education, //学历
        minAge,
        maxAge,
        minHeight,
        maxHeight,
        maritalStatus,
        minIncome,
        house,
        car,
      } = data || {}

      this.setState({
        education, //学历
        minAge,
        maxAge,
        minHeight,
        maxHeight,
        maritalStatus,
        minIncome,
        house,
        car,
      })
    }
  }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

	onEducationChange = (e) => {
		console.log('onEducationChange:', e);
    const { value } = e.detail;
		const education = getEducationValueByIndex({ hasEmpty: false, index: value });
		this.setState({
			education
		})
  }

  onAgeChange = (e) => {
		console.log('onAgeChange:', e);
    const { value } = e.detail;
    const ages =  getAgeValueByIndex({ hasEmpty: false, index: value, multiple: true });
    console.log('ages: ', ages);
    this.setState({
      minAge: ages[0],
      maxAge: ages[1]
    })

  }

  onHeightChange = (e) => {
		console.log('onHeightChange:', e);
    const { value } = e.detail;
    const heights =  getHeightValueByIndex({ hasEmpty: false, index: value, multiple: true });
    console.log('heights: ', heights);
    this.setState({
      minHeight: heights[0],
      maxHeight: heights[1]
    })

  }

  onMaritalStatusChange = (e) => {
		console.log('onMaritalStatusChange:', e);
    const { value } = e.detail;
    const status =  getMaritalStatusByIndex({ hasEmpty: false, index: +value });
    console.log('status: ', status);
    this.setState({
      maritalStatus: status?.value
    })
  }

  onMinIncomeChange = (e) => {
		console.log('onMinIncomeChange:', e);
    const { value } = e.detail;
    const status =  getMinIncomeValueByIndex({ hasEmpty: false, index: value });
    console.log('status: ', status);
    this.setState({
      minIncome: status?.value
    })
  }

  onHoureChange = (e) => {
		console.log('onHoureChange:', e);
    const { value } = e.detail;
    const status =  getHouseStatusByIndex({ index: +value });
    console.log('status: ', status);
    this.setState({
      house: status?.value
    })
  }

  onCarChange = (e) => {
		console.log('onCarChange:', e);
    const { value } = e.detail;
    const status =  getCarStatusByIndex({ index: +value });
    console.log('status: ', status);
    this.setState({
      car: status?.value
    })
  }

  handleSubmit = async () => {
		const {
      education, //学历
      minAge,
      maxAge,
      minHeight,
      maxHeight,
      maritalStatus,
      minIncome,
      house,
      car
		} = this.state;

    if (!education) {
      Taro.showToast({
        title: '请选择最低学历',
        icon: 'none',
        duration: 2000
      })
      return
    }

    if (!education) {
      Taro.showToast({
        title: '请选择年龄范围',
        icon: 'none',
        duration: 2000
      })
      return
    }

    if (!minHeight && !maxHeight) {
      Taro.showToast({
        title: '请选择身高范围',
        icon: 'none',
        duration: 2000
      })
      return
    }

    if (!maritalStatus) {
      Taro.showToast({
        title: '请选择婚姻状态',
        icon: 'none',
        duration: 2000
      })
      return
    }

    if (!minIncome) {
      Taro.showToast({
        title: '请选择最低收入',
        icon: 'none',
        duration: 2000
      })
      return
    }

		const params = {
			accountId: this.props.id,
      education, //学历
      minAge,
      maxAge,
      minHeight,
      maxHeight,
      maritalStatus,
      minIncome,
      house,
      car
		};

		const { success, data, msg } = await Taro.request({
			method: 'post',
			url: '/api/account/requirement',
			data: params
		})

		if (success) {
			this.props.onSuccess && this.props.onSuccess()
			Taro.showToast({
				title: '提交成功',
				icon: 'success',
				duration: 2000
			})
		} else {
			Taro.showToast({
				title: msg,
				icon: 'none',
				duration: 2000
			})
		}

		console.log("提交的参数是：", params)
	}

  render () {
    const {
      education,
      minAge,
      maxAge,
      minHeight,
      maxHeight,
      maritalStatus,
      minIncome,
      house,
      car
    } = this.state;
    const ageText = getAgeText(minAge, maxAge);
    const ageValue = getAgeIndexs({ hasEmpty: false, value: [minAge, maxAge], multiple: true })

    const heightText = getHeightText(minHeight, maxHeight);
    const heightValue = getHeightIndexs({ hasEmpty: false, value: [minHeight, maxHeight], multiple: true });

    const maritalStatusText = getMaritalStatusByValue({ value: maritalStatus })?.name;
    const minIncomeText = minIncomeToText(minIncome);

    const houseText = getHouseStatusByValue({ value: house })?.name;
    const carText = getCarStatusByValue({ value: car })?.name;
    

    return (
      <View>
          <View className='requirement-form'>
            <Picker
              mode='selector'
              range={EDUCATION_RANGE}
              onChange={this.onEducationChange}
            >
              <View className='form-item'>
                <View className='form-item-title require'>
                  最低学历
                </View>
                <View className='form-item-value'>
                  {education || '请选择'} 
                </View>
                <View className='form-item-arrow'>
                  <AtIcon value='chevron-right' size='22' color='#999'></AtIcon>
                </View>
              </View>
            </Picker>
            <Picker
              mode='multiSelector'
              range={AGE_RANGE}
              value={ageValue}
              onChange={this.onAgeChange}>
              <View className='form-item'>
                <View className='form-item-title require'>
                年龄范围
                </View>
                <View className='form-item-value'>
                  {ageText} 
                </View>
                <View className='form-item-arrow'>
                  <AtIcon value='chevron-right' size='22' color='#999'></AtIcon>
                </View>
              </View>
            </Picker>

            <Picker
              mode='multiSelector'
              range={HEIGHT_RANGE}
              value={heightValue}
              onChange={this.onHeightChange}>
              <View className='form-item'>
                <View className='form-item-title require'>
                身高范围
                </View>
                <View className='form-item-value'>
                  {heightText} 
                </View>
                <View className='form-item-arrow'>
                  <AtIcon value='chevron-right' size='22' color='#999'></AtIcon>
                </View>
              </View>
            </Picker>

            <Picker
              mode='selector'
              range={MARITAL_STATUS_RANGE}
              onChange={this.onMaritalStatusChange}
              rangeKey="name"
            >
              <View className='form-item'>
                <View className='form-item-title require'>
                  婚姻状态
                </View>
                <View className='form-item-value'>
                  {maritalStatusText || '请选择'}
                </View>
                <View className='form-item-arrow'>
                  <AtIcon value='chevron-right' size='22' color='#999'></AtIcon>
                </View>
              </View>
            </Picker>

            <Picker
              mode='selector'
              range={MIN_INCOME_RANGE}
              onChange={this.onMinIncomeChange}
              rangeKey="name"
            >
              <View className='form-item'>
                <View className='form-item-title require'>
                  最低收入
                </View>
                <View className='form-item-value'>
                  {minIncomeText || '请选择'}
                </View>
                <View className='form-item-arrow'>
                  <AtIcon value='chevron-right' size='22' color='#999'></AtIcon>
                </View>
              </View>
            </Picker>

            <Picker
              mode='selector'
              range={HOUSE_RANGE}
              onChange={this.onHoureChange}
              rangeKey="name"
            >
              <View className='form-item'>
                <View className='form-item-title require'>
                  房子
                </View>
                <View className='form-item-value'>
                  {houseText || '请选择'}
                </View>
                <View className='form-item-arrow'>
                  <AtIcon value='chevron-right' size='22' color='#999'></AtIcon>
                </View>
              </View>
            </Picker>

            <Picker
              mode='selector'
              range={CAR_RANGE}
              onChange={this.onCarChange}
              rangeKey="name"
            >
              <View className='form-item'>
                <View className='form-item-title require'>
                  车
                </View>
                <View className='form-item-value'>
                  {carText || '请选择'}
                </View>
                <View className='form-item-arrow'>
                  <AtIcon value='chevron-right' size='22' color='#999'></AtIcon>
                </View>
              </View>
            </Picker>
          </View>

        <View className='submit-btn'  onClick={this.handleSubmit}>
					提交
				</View>
      </View>
    )
  }
}